<style>
    .wrapper {
        padding: 200px 0 140px 0;
    }

    .btn-item {
        text-align: center;
        margin-bottom: 60px;
    }

    .btn-item .layui-btn {
        margin-right: 60px;
    }

    .btn-item .layui-btn:last-child {
        margin-right: 0px;
    }

    @media screen and (max-width: 450px) {

        .btn-item .layui-btn {
            margin-right: 10px;
        }
    }
</style>


<!-- 主体部分 -->
<div class="layui-body">

    <div class="layui-body-header">
        <span class="layui-body-header-title">admin风格弹窗</span>
        <span class="layui-breadcrumb pull-right" style="visibility: visible;">
          <a href="https://demo.easyweb.vip/pro/index.html">首页</a><span lay-separator="">/</span>
          <a><cite>admin风格弹窗</cite></a>
        </span>
    </div>

    <div class="wrapper">
        <div class="btn-item">
            <button data-dropdown="#dropdown1" data-anchor="bottom-left" class="layui-btn icon-btn">
                <i class="layui-icon layui-icon-triangle-d top"></i>上拉菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="bottom-center" class="layui-btn icon-btn">
                上拉<i class="layui-icon layui-icon-triangle-d top"></i>菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="bottom-right" class="layui-btn icon-btn">
                上拉菜单<i class="layui-icon layui-icon-triangle-d top"></i>
            </button>
        </div>

        <div class="btn-item">

            <button data-dropdown="#dropdown1" data-anchor="left-center" class="layui-btn icon-btn">
                右拉菜单<i class="layui-icon layui-icon-triangle-d right"></i>
            </button>

            <button class="layui-btn" style="visibility: hidden; width: 93px;"></button>

            <button data-dropdown="#dropdown1" data-anchor="right-center" class="layui-btn icon-btn">
                <i class="layui-icon layui-icon-triangle-d left"></i>左拉菜单
            </button>

        </div>

        <div class="btn-item">
            <button data-dropdown="#dropdown1" data-anchor="top-left" class="layui-btn icon-btn">
                <i class="layui-icon layui-icon-triangle-d"></i>下拉菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="top-center" class="layui-btn icon-btn">
                下拉<i class="layui-icon layui-icon-triangle-d"></i>菜单
            </button>

            <button data-dropdown="#dropdown1" data-anchor="top-right" class="layui-btn icon-btn">
                下拉菜单<i class="layui-icon layui-icon-triangle-d"></i>
            </button>
        </div>
    </div>

    <!-- 下拉菜单1 -->
    <div class="dropdown-menu dropdown-has-anchor dropdown-anchor-left-center" id="dropdown1" style="top: 304px; left: 729.5px;"><div class="dropdown-anchor"></div>
        <ul>
            <li><a class="edit">修改</a></li>
            <li class="divider"></li>
            <li><a class="del">删除</a></li>
            <li class="divider"></li>
            <li><a class="print">打印</a></li>
        </ul>
    </div>

</div>
<script>
layui.config({
	base: '/Public/Admin/' //静态资源所在路径
}).extend({
	dropdown: 'lib/extend/dropdownMenu/dropdown',
}).use(['dropdown'],function(){
	var dropdown = layui.dropdown,
		$ = layui.$;
	
	$('.edit').click(function () {
        layer.msg('点击了修改');
    });

    $('.del').click(function () {
        layer.msg('点击了删除');
    });

    $('.print').click(function () {
        layer.msg('点击了打印');
    });
	
});

</script>